<template>
    <div class="wrapper-loading"
         v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         infinite-scroll-distance="10"
    >
        <div class="wrapper">
            <div class="item" v-for="(item,key) in $store.state.home.bestSalesList" :key="key"
                 @click="$router.push(`/product/${item.design.objectId}`)" v-if="item.design">
                <img v-lazy="item.design.image.url" alt=""/>
                <div class="profile">
                    <div>{{item.design.title}}</div>
                    <FavBtn :designId="item.design.objectId"/>
                </div>
            </div>
        </div>
        <div :style="{opacity: loading1?1:0}" class="loading-div">loading</div>
    </div>

</template>
<script>
    import withStore from "../../../../vuex/withStore";
    import {getbestSales} from "./service";
    import FavBtn from '../../../../components/favBtn'
    import UniqBy from "../../../../utils/lodash/UniqBy";

    export default withStore({
        components: {
            FavBtn
        },
        data() {
            return {
                page: this.getStore("home.bestSalesList_page"),
                loading1: false
            }
        },
        mounted() {
            this.loadMore()
        },
        methods: {
            loadMore() {
                var self = this
                self.loading1 = true
                getbestSales(this.page).then(lists => {
                    if (lists) {
                        if (lists.length) {
                            var _list = self.$store.state.home.bestSalesList.concat(lists)
                            self.page.offset = self.page.offset + self.page.limit
                            self.setStore("home.bestSalesList", UniqBy(_list, "designId"))
                            self.setStore("home.bestSalesList_page", self.page)
                        }
                    }
                })
                setTimeout(() => {
                    self.loading1 = false
                }, 500)
            }
        }
    })
</script>
<style lang="less" scoped>
    .loading-div {
        height: px2rem(100);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wrapper {
        padding-left: px2rem(10);
        padding-right: px2rem(10);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
            margin-bottom: 10px;
            width: 49%;
            .profile {
                display: flex;
                justify-content: space-between;
                height: px2rem(50);
            }
            img {
                max-width: 100%;
                height: px2rem(400);
            }

        }
    }
</style>